<template>
  <div class="Main">

    <div class="left">
      <div class="Go">

        <el-form label-position='top' label-width="100px" :model="formLabelAlign" style="max-width: 460px">
          <el-form-item label="请选择出发点" :required="true">
            <el-cascader v-model="start" :options="options" clearable @change="handleChange" />
          </el-form-item>
          <el-form-item label="请选择到达点" :required="true">
            <el-cascader v-model="destination" :options="options1" clearable @change="handleChange" />
          </el-form-item>
          <el-form-item label="请选择时间" :required="true">
            <el-date-picker v-model="time" type="datetime" placeholder="选择时间" format="YYYY/MM/DD HH:mm:ss"
              value-format="x" :disabled-date="disabledDateFn"   :disabled-time="['10:00:00']"/>
          </el-form-item>
          <el-form-item label="请输入车牌号" :required="true">
            <el-input v-model="LicensePlate" placeholder="请输入车牌号" clearable />
          </el-form-item>
          <el-form-item label="请输入手机号" :required="true">
            <el-input v-model="phone" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="请输入详细地址" :required="true">
            <el-input v-model="place" placeholder="请输入详细地址" show-word-limit :autosize="{ minRows: 3, maxRows: 6 }"
              type="textarea" maxlength="30" />
          </el-form-item>


        </el-form>

        <el-form label-width="100px" :model="formInline" class="demo-form-inline">
          <el-form-item label="请输入人数" :required="true">
            <el-cascader v-model="people" :options="peopleoptions" clearable @change="handleChange" />
          </el-form-item>
          <el-form-item label="请输入金额" :required="true">
            <el-input v-model="money" placeholder="请输入金额" clearable />
          </el-form-item>


        </el-form>
        <el-form label-position='top' label-width="100px" :model="formLabelAlign" style="max-width: 460px">
          <el-form-item>
            <el-button type="primary" @click="submitData()">发布</el-button>
            <el-button @click="resetData()">重置</el-button>
          </el-form-item>

        </el-form>


      </div>



    </div>
    <div class="right">

      <el-space direction="vertical">

        <el-text tag="b">友情链接</el-text>
       
        <el-text tag="p"><el-link type="primary"  href="https://www.zhihu.com/question/54172794" target="著名景点">南京著名景点</el-link></el-text>
        <el-text tag="p" ><el-link type="primary" href="https://zhuanlan.zhihu.com/p/630560854" target="十大景点"> 南京十大景点</el-link></el-text>
        <el-text tag="p" ></el-text>
        <el-text tag="p" ><el-link type="primary" href="https://www.zhihu.com/question/544767495" target="美食"> 南京美食</el-link></el-text>
        <el-text tag="p" ></el-text>
        <el-text tag="p" ><el-link type="primary" href="https://www.nanjing.gov.cn/index.html" target="政府">南京市政府</el-link></el-text>
        <el-text tag="p" ></el-text>
        <el-text tag="p" ><el-link type="primary" href="https://www.12306.cn/index/" target="12306">12306</el-link></el-text>

        

        <el-text tag="mark"><el-link type="primary" href="http://www.dreamers.ren/" target="大学生联盟">南京大学生联盟</el-link></el-text>

        <el-text tag="p" ></el-text>


        <el-text tag="mark"><el-link type="primary" href=""  disabled target="联系我们">联系我们</el-link></el-text>
      </el-space>
    </div>




    <!-- <div id="container"></div> -->
  </div>
</template>
   
<script setup>
import { onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

import axiosInstance from '../../js/axiosself';

import { ElMessage } from 'element-plus'

// 使用ref创建响应式的map对象
const map = ref(null);



// initMap方法现在定义在setup()函数内部
function initMap() {
  AMapLoader.load({
    key: "b1981fa72b903c3827419e37bdd090da", // 替换为你的高德地图Key

    version: "2.0", // 指定要加载的 JSAPI 的版本
    plugins: [''], // 需要使用的插件列表
  }).then((AMap) => {
    map.value = new AMap.Map("container", { // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 5, // 初始化地图级别
      center: [105.602725, 37.076636], // 初始化地图中心点位置
    });
  }).catch(e => {
    console.log(e);
  });
}

// 使用onMounted生命周期钩子来确保DOM已经加载完成
onMounted(() => {
  initMap();
});

const start = ref('')

const phone = ref('')

const people = ref('');

const destination = ref('')

const place = ref('');

const time = ref('');

const LicensePlate = ref("");

const money = ref("");


const options = [
  {
    value: '仙林大学城',
    label: '仙林大学城',
    children: [
      {
        value: '南京大学',
        label: '南京大学',

      },
      {
        value: '南京师范大学',
        label: '南京师范大学',
      },
      {
        value: '南京财经大学',
        label: '南京财经大学',
      },
      {
        value: '南京邮电大学',
        label: '南京邮电大学',
      },
      {
        value: '南京中医药大学',
        label: '南京中医药大学',
      },
      {
        value: '南京森林警察学院',
        label: '南京森林警察学院',
      },
      {
        value: '南京审计大学金审学院',
        label: '南京审计大学金审学院',
      },
      {
        value: '南京理工大学紫金学院',
        label: '南京理工大学紫金学院',
      },
      {
        value: '南京体育学院',
        label: '南京体育学院',
      },
      {
        value: '南京工业职业技术大学',
        label: '南京工业职业技术大学',
      },

    ],
  },
  {
    value: '江宁大学城',
    label: '江宁大学城',
    children: [
      {
        value: '东南大学',
        label: '东南大学',

      },
      {
        value: '河海大学',
        label: '河海大学',
      },
      {
        label: '中国药科大学',
        value: '中国药科大学',
      },
      {
        value: ' 南京传媒学院',
        label: ' 南京传媒学院',
      },
      {
        value: '南京医科大学',
        label: '南京医科大学',
      }, {
        value: ' 南京工程学院',
        label: ' 南京工程学院',
      },
      {
        value: '南京晓庄学院',
        label: '南京晓庄学院',
      },
      {
        value: '金陵科技学院',
        label: '金陵科技学院',
      },
      {
        value: '南京邮电大学',
        label: '南京邮电大学',
      },
      {
        value: '江苏海事职业技术学院',
        label: '江苏海事职业技术学院',
      },
      {
        value: '金陵协和神学院',
        label: '金陵协和神学院',
      },
      {
        value: '南京交通职业技术学院 ',
        label: '南京交通职业技术学院 ',
      },
      {
        value: '南京旅游职业学院',
        label: '南京旅游职业学院',
      },
      {
        value: '江苏经贸职业技术学院',
        label: '江苏经贸职业技术学院',
      },
      {
        value: '正德职业技术学院',
        label: '正德职业技术学院',
      },
      {
        value: '应天职业技术学院',
        label: '应天职业技术学院',
      },
    ],
  },
  {
    value: '江宁大学城',
    label: '江宁大学城',
    children: [
      {
        value: '南京信息工程大学',
        label: '南京信息工程大学',
      },
      {
        value: ' 南京工业大学',
        label: ' 南京工业大学',
      },
      {
        value: ' 南京审计大学南京农业大学',
        label: ' 南京审计大学南京农业大学',
      },
      {
        value: '南京农业大学',
        label: '南京农业大学',
      },
      {
        value: '江苏第二师范学院',
        label: '江苏第二师范学院',
      },
      {
        value: ' 南京铁道职业技术学院',
        label: ' 南京铁道职业技术学院',
      },
      {
        value: '江苏警官学院',
        label: '江苏警官学院',
      },
      {
        value: '南京大学金陵学院',
        label: '南京大学金陵学院',
      },
      {
        value: '东南大学成贤学院',
        label: '东南大学成贤学院',
      },

    ]

  },
  {
    value: '溧水大学城',
    label: '溧水大学城',
    children: [
      {
        value: '南京林业大学',
        label: '南京林业大学',
      },
      {
        value: '南京工业大学浦江学院',
        label: '南京工业大学浦江学院',
      },
      {
        value: ' 江苏第二师范学院',
        label: ' 江苏第二师范学院',
      },
      {
        value: '南京艺术学院',
        label: '南京艺术学院',
      },
      {
        value: '中国人民解放军陆军工程大学',
        label: '中国人民解放军陆军工程大学',
      },
      {
        value: '南京元博职业技术学院',
        label: '南京元博职业技术学院',
      },
      {
        value: '南京视觉艺术学院',
        label: '南京视觉艺术学院',
      },
      {
        value: '南京城市职业学院',
        label: '南京城市职业学院',
      },
      {
        value: '江苏传媒学院',
        label: '江苏传媒学院',
      },

    ]

  },
  {
    value: '风景区',
    label: '风景区',
    disabled: true,
    children: [


    ]

  },


]
const peopleoptions = [
  {value: '2',
    label: '2',},
    {value: '3',
    label: '3',},
    {value: '4',
    label: '4',},
    {value: '5',
    label: '5',},
   

]

const options1 = [

  {
    value: '高铁/火车 站',
    label: '高铁/火车 站',
    // disabled: true,
    children: [
      {
        value: '仙林站',
        label: '仙林站',
      },
      {
        value: '南京站',
        label: '南京站',
      },
      {
        value: '南京南站',
        label: '南京南站',
      },
      {
        value: '溧水站',
        label: '溧水站',
      },
      {
        value: '江宁站',
        label: '江宁站',
      },
      {
        value: '江宁西站',
        label: '江宁西站',
      },

    ]

  },
  {
    value: '巴士 站',
    label: '巴士 站',
    // disabled: true,
    children: [
      {
        value: '南京汽车客运站(小红山客运站)',
        label: '南京汽车客运站(小红山客运站)',
      },
      {
        value: '南京客运南站(南京汽车客运南站)',
        label: '南京客运南站(南京汽车客运南站)',
      },
      {
        value: '南京东站(南京长途汽车东站)',
        label: '南京东站(南京长途汽车东站)',
      },
      {
        value: '南京北站(南京长途汽车客运北站)',
        label: '南京北站(南京长途汽车客运北站)',
      },
      {
        value: '江宁客运站',
        label: '江宁客运站',
      },
      {
        value: '高淳站',
        label: '高淳站',
      },
      {
        value: '溧水站',
        label: '溧水站',
      },
      {
        value: '南京葛塘站',
        label: '南京葛塘站',
      },

    ]

  },
  {
    value: '景区',
    label: '景区',
    // disabled: true,
    children: [
      {
        value: '钟山风景区',
        label: '钟山风景区',
      },
      {
        value: '栖霞山风景区',
        label: '栖霞山风景区',
      },
      {
        value: '夫子庙·秦淮河·老门东',
        label: '夫子庙·秦淮河·老门东',
      },
      {
        value: '牛首山·佛顶宫',
        label: '牛首山·佛顶宫',
      },
      {
        value: '总统府·南京博物院',
        label: '总统府·南京博物院',
      },
      {
        value: '南京城墙中华门·玄武湖',
        label: '南京城墙中华门·玄武湖',
      },
      {
        value: '瞻园·愚园·古典园林',
        label: '瞻园·愚园·古典园林',
      },
      {
        value: '南京寺庙',
        label: '南京寺庙',
      },
      {
        value: '汤山温泉·江苏园博园·汤山欢乐水世界',
        label: '汤山温泉·江苏园博园·汤山欢乐水世界',
      },
      {
        value: '阅江楼·狮子山',
        label: '阅江楼·狮子山',
      },
    ]

  },
  {
    value: '美食街',
    label: '美食街',
    disabled: true,
    children: [
      {
        value: '',
        label: '',
      },
    ]
  },
  {
    value: '市区',
    label: '市区',
    disabled: true,
    children: []

  },


]
const submitData = () => {
  axiosInstance.get(`/AddOrder?start=${start.value}&destination=${destination.value}&time=${time.value}&LicensePlate=${LicensePlate.value}&phone=${phone.value}&place=${place.value}&people=${people.value}&money=${money.value}`).then(res=>{
    if (res.data.code==1){
      ElMessage({
    message: '发布成功',
    type: 'success',
  })
  resetData();
    }else{
      ElMessage.error('发布失败')
    }
  });
}

const resetData = () => {

start.value = '';

phone.value = '';

people.value = '';

destination.value = '';

place.value = '';

time.value = '';

LicensePlate.value = '';

money.value = '';


}

const disabledDateFn = (time) => {
  if (time.getTime() < Date.now() - 8.64e7+1000*60*60*24*2) {
    return true;
  } else {
    return false;
  }
}
</script>
   
<style>
#container {
  width: 80%;
  height: 400px;
  margin: 100px auto;
  border: 1px solid rgb(127, 184, 183);
  border-radius: 20px;


}

.Main {
  width: 1000px;
  height: 700px;
  /* padding: 10px 50px 10px 50px; */
  padding: 10px 50px;
  /* background-color: aqua; */
}

.Main .left {
  height: 700px;
  width: 700px;
  /* background-color: rgb(11, 64, 223); */
  float: left;
}

.Main .right {
  height: 680px;
  width: 300px;
  /* background-color: rgb(45, 166, 166); */
  padding-top: 20px;
  float: left;
}

.Main .left .Go {
  height: 680px;
  width: 700px;
  /* padding: 150px 20px 150px 20px; */
  /* padding: 150px 20px; */
  padding-top: 20px;
  float: left;

  /* background-color: rgb(255, 0, 0); */
}

.Main .left .Go1 {
  height: 50px;
  width: 350px;
  /* float: left; */
  background-color: rgb(255, 0, 0);
  margin-bottom: 50px;


}
</style>